<template>
  <div class="maps-container">
    <div id="main"></div>
    <img src="../../assets/aaa.png" alt />
    <table class="table" v-if="allDataArr.length>0">
      <tr v-for="(item,index) in allDataArr" :key="index">
        <td>
          {{index*1+1}}.{{item.name}}
          <span>{{item.value}}</span>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
// import $ from "jquery";
import echarts from "echarts";
// import chinaJson from "echarts/map/json/china.json";
import yunnanJson from "echarts/map/json/province/yunnan.json";
export default {
  data() {
    return {
      ynCodeList: [
        530000,
        530100,
        530300,
        530400,
        530500,
        530600,
        530700,
        530800,
        530900,
        532300,
        532500,
        532600,
        532800,
        532900,
        533100,
        533300,
        533400
      ],
      allDataArr: []
    };
  },
  created() {},
  mounted() {
    //  this.getData(530000);
    this.drawMap();
  },
  methods: {
    getWidth() {
      let cw = document.documentElement.clientWidth;
      let ch = document.documentElement.clientHeight;
      let w = cw * 0.25 + "px";
      let h = ch * 0.5 + "px";
      document.getElementById("main").style.width = w;
      document.getElementById("main").style.height = h;
    },
    getData(cityCode) {
      if (this.ynCodeList.indexOf(cityCode) == -1) {
        /* 地图下钻到市级 */
        console.log("阻止请求");
        return;
      }
      if (cityCode == 530000) {
        this.cityView = false;
      }
      /* 获取城市json数据 */
      // import("@/image/json/yunnan/" + cityCode + ".geo").then(resData => {
      import("@/views/echart/yunnan/" + cityCode + ".geo").then(resData => {
        console.log("州/市json", resData.features);
        let list = resData.features;
        findAllAcceptDataByArea(cityCode).then(res => {
          console.log(6666, res);
          if (res.code == 200) {
            let arr = res.result.data;
            for (let j = 0; j < arr.length; j++) {
              for (let k = 0; k < list.length; k++) {
                if (arr[j].areaCode == list[k].properties.adcode) {
                  arr[j].name = list[k].properties.name;
                  arr[j].latitude = list[k].properties.center[1] + "";
                  arr[j].longitude = list[k].properties.center[0] + "";
                }
              }
              // this.dataArr = arr;
            }

            console.log(22222, arr);
            let arr1 = [
              {
                name: "昆明市",
                latitude: "25.040609",
                accept: 10,
                result: 231,
                areaCode: "530100",
                longitude: "102.712251"
              },
              {
                name: "曲靖市",
                latitude: "25.501557",
                accept: 10,
                result: 20,
                areaCode: "530300",
                longitude: "103.797851"
              },
              {
                name: "玉溪市",
                latitude: "24.350461",
                accept: 10,
                result: 30,
                areaCode: "530400",
                longitude: "102.543907"
              },
              {
                name: "保山市",
                latitude: "25.111802",
                accept: 10,
                result: 30,
                areaCode: "530500",
                longitude: "99.167133"
              },
              {
                name: "昭通市",
                latitude: "27.336999",
                accept: 10,
                result: 3,
                areaCode: "530600",
                longitude: "103.717216"
              },
              {
                name: "丽江市",
                latitude: "26.872108",
                accept: 10,
                result: 66,
                areaCode: "530700",
                longitude: "100.233026"
              },
              {
                name: "普洱市",
                latitude: "22.777321",
                accept: 10,
                result: 213,
                areaCode: "530800",
                longitude: "100.972344"
              },
              {
                name: "临沧市",
                latitude: "23.886567",
                accept: 10,
                result: 23,
                areaCode: "530900",
                longitude: "100.08697"
              },
              {
                name: "楚雄州",
                latitude: "25.041988",
                accept: 10,
                result: 23,
                areaCode: "532300",
                longitude: "101.546046"
              },
              {
                name: "红河州",
                latitude: "23.2",
                accept: 10,
                result: 23,
                areaCode: "532500",
                longitude: "103.384182"
              },
              {
                name: "文山州",
                latitude: "23.75",
                accept: 10,
                result: 23,
                areaCode: "532600",
                longitude: "104.5"
              },
              {
                name: "西双版纳",
                latitude: "22.001724",
                accept: 10,
                result: 23,
                areaCode: "532800",
                longitude: "100.797941"
              },
              {
                name: "大理州",
                latitude: "25.589449",
                accept: 10,
                result: 23,
                areaCode: "532900",
                longitude: "100.225668"
              },
              {
                name: "德宏州",
                latitude: "24.436694",
                accept: 10,
                result: 23,
                areaCode: "533100",
                longitude: "98.578363"
              },
              {
                name: "怒江州",
                latitude: "25.850949",
                accept: 10,
                result: 23,
                areaCode: "533300",
                longitude: "98.854304"
              },
              {
                name: "迪庆州",
                latitude: "27.826853",
                accept: 10,
                result: 43,
                areaCode: "533400",
                longitude: "99.706463"
              }
            ];
            this.drawMap(cityCode, resData, arr);
          }
        });
      });
    },
    getLineColor(num) {
      if (num <= 10000) {
        return "hsl(120,100%,50%)";
      } else if (num <= 20000) {
        return "良";
      } else if (num <= 30000) {
        return "轻度污染";
      } else if (num <= 40000) {
        return "中度污染";
      } else {
        return "严重污染";
      }
    },
    drawMap() {
      this.getWidth();
      let datas = [
        {
          name: "昆明市",
          value: 12000
        },
        {
          name: "曲靖市",
          value: 60000
        },
        {
          name: "玉溪市",
          value: 8000
        },
        {
          name: "保山市",
          value: 18000
        },
        {
          name: "昭通市",
          value: 19
        },
        {
          name: "丽江市",
          value: 11
        },
        {
          name: "普洱市",
          value: 31000
        },
        {
          name: "临沧市",
          value: 42000
        },
        {
          name: "楚雄州",
          value: 20000
        },
        {
          name: "红河州",
          value: 12200
        },
        {
          name: "文山州",
          value: 42000
        },
        {
          name: "西双版纳",
          value: 19
        },
        {
          name: "大理州",
          value: 12
        },
        {
          name: "德宏州",
          value: 32
        },
        {
          name: "怒江州",
          value: 42
        },
        {
          name: "迪庆州",
          value: 73
        }
      ];
      this.allDataArr = [
        {
          name: "昆明市",
          value: [102.7, 25.04, 88],
          itemStyle: {
            color: getColor(30088)
          },
          visualMap: false
        },
        {
          name: "曲靖市",
          value: [103.797851, 25.501557, 19000],
          itemStyle: {
            color: getColor(19000)
          },
          visualMap: false
        },
        {
          name: "玉溪市",
          value: [102.54, 24.35, 9],
          visualMap: false
        },
        {
          name: "保山市",
          value: [99.167, 25.11, 6900],
          itemStyle: {
            color: getColor(6900)
          },
          visualMap: false
        },
        {
          name: "昭通市",
          value: [103.797851, 27.336, 29],
          visualMap: false
        },
        {
          name: "丽江市",
          value: [100.233, 26.87, 19],
          visualMap: false
        },
        {
          name: "普洱市",
          value: [100.97, 22.77, 3900],
          visualMap: false
        },
        {
          name: "临沧市",
          value: [100.086, 23.886, 9],
          visualMap: false
        },
        {
          name: "楚雄州",
          value: [101.546, 25.041, 11900],
          itemStyle: {
            color: getColor(11900)
          },
          visualMap: false
        },
        {
          name: "红河州",
          value: [103.384, 23.2, 19],
          visualMap: false
        },
        {
          name: "文山州",
          value: [104.5, 23.75, 31215],
          visualMap: false
        },
        {
          name: "西双版纳",
          value: [100.797, 22.001, 50023],
          itemStyle: {
            color: getColor(50023)
          },
          visualMap: false
        },
        {
          name: "大理州",
          value: [100.225, 25.589, 34],
          visualMap: false
        },
        {
          name: "德宏州",
          value: [98.578, 24.436, 12],
          visualMap: false
        },
        {
          name: "怒江州",
          value: [98.854, 25.85, 89],
          visualMap: false
        },
        {
          name: "迪庆州",
          value: [99.706, 27.826, 19],
          visualMap: false
        }
      ];
      function getColor(type, typeType) {
        var color;
        if (isNaN(type)) {
          switch (type) {
            case "优":
              color = "#1CCFE6";
              break;
            case "良":
              color = "#0060E6";
              break;
            case "轻度污染":
              color = "#00589A";
              break;
            case "中度污染":
              color = "#002D81";
              break;
            case "严重污染":
              color = "#000A2B";
              break;
            case "总受理量":
              color = "hsl(240,100%,50%)";
              break;
            case "总办结量":
              color = "#43ce17";
              break;
            default:
              break;
          }
        } else {
          function getAQITYPE(num) {
            if (num <= 10000) {
              return "优";
            } else if (num <= 20000) {
              return "良";
            } else if (num <= 30000) {
              return "轻度污染";
            } else if (num <= 40000) {
              return "中度污染";
            } else {
              return "严重污染";
            }
          }
          color = getColor(getAQITYPE(type));
        }
        return color;
      }
      let myChart = echarts.init(document.getElementById("main"));
      echarts.registerMap("yunnan", yunnanJson);
      let option = {
        backgroundColor: "#154e90",
        tooltip: {
          trigger: "item"
        },
        grid: {
          left: 0,
          right: "10%"
        },
        geo: {
          map: "yunnan",
          roam: false,
          zoom: 1.1,
          scaleLimit: {
            min: 1,
            max: 1.2
          },
          itemStyle: {
            normal: {
              show: false /* 显示省/市名称 */,
              areaColor: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0, 252, 255, 0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 252, 255, 0)" // 100% 处的颜色
                  }
                ]
              },
              borderColor: "#A39039" //描边颜色
            }
          }
        },
        visualMap: {
          type: "piecewise",
          realtime: false,
          calculable: true,
          pieces: [
            {
              min: 0,
              max: 10000,
              // label: "优",
              color: getColor("优")
            },
            {
              min: 10001,
              max: 20000,
              // label: "良",
              color: getColor("良")
            },
            {
              min: 20001,
              max: 30000,
              // label: "轻度",
              color: getColor("轻度污染")
            },
            {
              min: 30001,
              max: 40000,
              color: getColor("中度污染")
            },
            {
              min: 40000,
              // label: "轻度",
              color: getColor("严重污染")
            }
          ],
          textStyle: {
            color: "#fff"
          }
        },

        series: [
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            data: this.allDataArr,
            symbol: "rect",
            symbolSize: function(a, p) {
              var size = [12 * p.name.length, 25];
              return size;
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke"
            },
            // tooltip: {
            //   trigger: "item"
            // },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: "{b}",
                //position: 'right',
                show: true,
                backgroundColor: "rgba(31, 60, 69,.88)",
                borderColor: "#ddd",
                borderWidth: 1,
                //   fontFamily: fontFamily,
                fontWeight: "bold",
                fontSize: 13,
                color: "whitesmoke",
                padding: 4
              }
            }
          },

          {
            type: "map",
            map: "yunnan",
            zoom: 1.1,
            scaleLimit: {
              min: 1,
              max: 1.2
            },
            label: {
              normal: {
                show: false,
                color: "#fff", //字的颜色
                fontSize: 14
              },
              emphasis: {
                show: false,
                color: "#fff",
                type: "linear",
                x: 1,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(81,98,31,1)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,0,0,0.6)" // 100% 处的颜色
                  }
                ]
              }
            },
            itemStyle: {
              normal: {
                areaColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(0, 252, 255, 0.5)" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(0, 252, 255, 0.3)" // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                },
                borderColor: "#A39039" //描边颜色
              }
            },
            emphasis: {
              normal: {
                label: {
                  show: false,
                  color: "#53e5ce"
                }
              },
              itemStyle: {
                areaColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(0, 252, 255, 1)" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(0, 252, 255, 0.5)" // 100% 处的颜色
                    }
                  ]
                }
              }
            },
            z: 2,
            data: datas
          }
        ]
      };
      if (option && typeof option === "object") {
        myChart.setOption(option, true);
      }

      myChart.on("click", this.echartsMapClick);
    },
    echartsMapClick(params) {
      console.log(params);
    }
  }
};
</script>

<style scoped lang="scss">
.maps-container {
  width: 100%;
  height: 100%;
  position: relative;

  img {
    height: 400px;
    position: absolute;
    left: 340px;
    top: 70px;
  }
  .table {
    position: absolute;
    right: 0;
    bottom: 0;
    border: none;
    color: #fff;
    background: rgba(31, 60, 69, 0.88);
    box-shadow: rgb(221, 221, 221) 0px 1px 4px;
    td {
      border: none;
      border-bottom: 1px dotted #fff;
    }
  }
}
</style>
